<template>
  <div id="articleArea">
    <a-button type="primary" @click="handleAdd">添加文章</a-button>

    <a-button class="mb-10" @click="handleQuery">查询文章</a-button>
    <div v-if="isShow">
      <a-input style="width: 300px" v-model="inputValue"></a-input>
      <a-button @click="handleConfirm">确认</a-button>
    </div>
    <div class="article_box">
      <div v-for="(item, index) in articleData" :key="item.id" class="item">
        {{ item.content }}
        <a-button size="small" type="primary">修改文章</a-button>
        <a-button size="small" type="danger" @click="handleDelete(index)"
          >删除</a-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: "",
      type: "",
      isShow: false,
      articleData: [
        { id: 1, content: "一去二三里" },
        { id: 2, content: "烟村四五家" },
        { id: 3, content: "亭台六七座" },
        { id: 4, content: "八九十支花" },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleQuery() {
      this.isShow = true;
      this.type = "query";
    },
    handleConfirm() {
      if (this.type === "add") {
        this.articleData.push({ id: +new Date(), content: this.inputValue });
      } else {
        let contentIndex = "";
        this.articleData.forEach((e, index) => {
          if (e.content.includes(this.inputValue)) {
            contentIndex = index;
          }
        });
        this.articleData = [this.articleData[contentIndex]];
      }
    },
    handleAdd() {
      this.isShow = true;
      this.type = "add";
    },
    handleDelete(index) {
      this.articleData.splice(index, 1);
    },
  },
  component: {},
};
</script>
<style lang="less" scoped>
.mb-10 {
  margin-bottom: 10px;
}
#articleArea {
  padding: 20px;
  .article_box {
    margin-top: 20px;
    width: 600px;
    height: 300px;
    border: 1px solid #ccc;
    .item {
      margin-bottom: 5px;
    }
  }
}
</style>
